<!--
 * @Author: lijilong
 * @Date: 2024-06-16 10:19:11
 * @LastEditors: lijilong lijilong@thwater.com
 * @LastEditTime: 2024-08-30 14:40:52
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
	<!-- <movable-area :scale-area="true" :style="{ 'width': '98vw', 'height': '1100rpx', 'overflow': 'hidden' }"> -->
	<!-- <movable-view direction="all" :inertia="true" out-of-bounds :scale-min="0.5" :scale-max="2" :scale="true" -->
	<!-- :scale-value="1" :style="{ 'width': 'auto ', 'height': 'auto' }"> -->
	<!-- <view v-for="(table, index) in tableOptions" :key="index"> -->
	<dynamic-table :columns="tableOptions.tableColumns" :tableData="tableOptions.tableData">

		<template v-slot:processExpendAll="{ scope }">
			<view class="process-cell" @click.stop="expendAll(scope)">
				<view>{{ scope.column.label }}</view>
				<view style="margin-left:5px;">
					<wd-icon name="arrow-down" size="22px" v-if="!scope.column.expend"></wd-icon>
					<wd-icon name="arrow-up" size="22px" v-else></wd-icon>
				</view>
			</view>
		</template>
		<template v-slot:processExpend="{ scope }">
			<div class="process-cell" @click.stop="expend(scope)">
				<view>{{ scope.row.processName }}</view>
				<view v-if="visibleExpend(scope)" style="margin-left:5px;">
					<wd-icon name="arrow-down" size="22px" v-if="!scope.row.expend"></wd-icon>
					<wd-icon name="arrow-up" size="22px" v-else></wd-icon>
				</view>
			</div>
		</template>
	</dynamic-table>
	<!-- </view> -->
	<!-- </movable-view>
    </movable-area> -->
</template>

<script setup lang="ts">
	import { request } from '@/utils/request';
	import { formatByDayjs } from '@/utils/util';
	import DynamicTable from './dynamicTable/index.vue';

	const props = withDefaults(defineProps<{
		recordId : string,
		materialList : [],
	}>(), {
		recordId: () => '',
		materialList: () => [],
	})


	const tableColumns = ref(
		[
			{
				label: '序号',
				prop: '_index',
				align: 'center',
				width: 60,
				customCell: (item, index, columns) => {
					return { rowspan: item.rowspan }
				}
			}, {
				label: '工序',
				prop: 'processName',
				align: 'center',
				width: 160,
				render: 'processExpend',
				headerRender: 'processExpendAll',
				customCell: (item, index, columns) => {
					return { rowspan: item.rowspan }
				}
			},
			{
				label: '操作时间',
				prop: 'operateTime',
				align: 'center',
				width: 420,
				customStyleCell: (item, index, columns) => {

					if (item.color) {
						return {
							color: item.color,
							// background: item.color
						}
					}
					return null

				}
			},
			{
				label: '物料名称',
				prop: 'invName',
				align: 'center',
				width: 240,
			},
		]
	)

	const tableOptions = ref({
		tableColumns: [],
		tableData: []
	})

	let allTableData = []
	let expendTableData = []

	/**
	 * 合并单元格
	 * @param list 
	 */

	const margeCell = (list) => {
		let eqIndex = 0;
		list.forEach((row, _rowIndex) => {
			const prevRow = list[_rowIndex - 1];
			let nextRow = list[_rowIndex + 1];
			if (prevRow && prevRow['processName'] === row['processName'] && prevRow['sn'] === row['sn']) {
				row.row = 0;
				row.rowspan = 0;
			} else {
				let countRowspan = 1;

				while (nextRow && nextRow['processName'] === row['processName'] && nextRow['sn'] === row['sn']) {
					nextRow = list[++countRowspan + _rowIndex];
				}

				if (countRowspan > 1) {
					row.row = _rowIndex;
					row.rowspan = countRowspan;
					row['operateTime'] = row['operateTime'].includes('开始') ? row['operateTime'] : '开始：' + row['operateTime'];
					row.color = '#52c41a';

					let processEndRowOperateTime = list[countRowspan + _rowIndex - 1]['operateTime']
					list[countRowspan + _rowIndex - 1]['operateTime'] = processEndRowOperateTime.includes('结束') ? processEndRowOperateTime : '结束：' + processEndRowOperateTime;
					list[countRowspan + _rowIndex - 1].color = '#f50';
					row['_index'] = eqIndex + 1
					eqIndex++
				} else {
					row['_index'] = eqIndex + 1
					if (nextRow) eqIndex++;
					row.row = _rowIndex;
					row.rowspan = countRowspan;
				}
			}
		})
	}


	/**
	 * 单个工序合并单元格
	 */

	const processMargeCell = (list) => {
		// let eqIndex = 0;
		list.forEach((row, _rowIndex) => {
			const prevRow = list[_rowIndex - 1];
			let nextRow = list[_rowIndex + 1];
			if (prevRow && prevRow['processName'] === row['processName'] && prevRow['sn'] === row['sn']) {
				row.row = 0;
				row.rowspan = 0;
			} else {
				let countRowspan = 1;

				while (nextRow && nextRow['processName'] === row['processName'] && nextRow['sn'] === row['sn']) {
					nextRow = list[++countRowspan + _rowIndex];
				}

				if (countRowspan > 1) {
					row.row = _rowIndex;
					row.rowspan = countRowspan;

					row['operateTime'] = row['operateTime'].includes('开始') ? row['operateTime'] : '开始：' + row['operateTime'];
					row.color = '#52c41a';

					let processEndRowOperateTime = list[countRowspan + _rowIndex - 1]['operateTime']
					list[countRowspan + _rowIndex - 1]['operateTime'] = processEndRowOperateTime.includes('结束') ? processEndRowOperateTime : '结束：' + processEndRowOperateTime;
					list[countRowspan + _rowIndex - 1].color = '#f50';
					// row['_index'] = eqIndex + 1
					// eqIndex++
				} else {
					// row['_index'] = eqIndex + 1
					// if (nextRow) eqIndex++;
				}
			}
		})
	}



	/**
	 * 渲染表格单元格数据
	 * @param item 
	 * @param index 
	 * @param columns 
	 */
	const renderCell = (item, index, columns) => {
		const param = item.paramColumns.find(item => item.columnKey == columns.parentProp)
		if (!param) return ''
		return param[columns.prop] || null;
	}


	/**
	 * 根据当前行查找对应的工序下的所有行
	 */
	const findProcess = (row) => {
		return allTableData.filter(item => item.processName == row.processName && row.sn == item.sn)
	}


	/**
	 * 展开/折叠是否需要加载
	 */
	const visibleExpend = (payload) => {
		const processNameObj : any[] = findProcess(payload.row)

		if (processNameObj) {
			return processNameObj.length > 1
		}

		return false
	}



	/**
	 * 全部展开/折叠
	 */
	const expendAll = (scope) => {
		scope.column.expend = !scope.column.expend

		if (scope.column.expend) {
			tableOptions.value.tableData = allTableData.map(item => {
				if (visibleExpend({ row: item })) {
					item.expend = true
				}

				return item
			})

		} else {

			tableOptions.value.tableData = expendTableData.map(item => {
				item.rowspan = 1;
				item.operateTime = item.operateTime?.includes('开始') ? item.operateTime.substring(3, item.operateTime.length) : item.operateTime
				item.color = '';
				item.expend = scope.column.expend
				return item
			})

		}
		margeCell(tableOptions.value.tableData)


	}

	/**
	 * 展开/折叠
	 * @param scope 
	 */

	const expend = (scope) => {
		if (!visibleExpend(scope)) return
		scope.row.expend = !scope.row.expend
		if (scope.row.expend) {
			const processRowDTOS = findProcess(scope.row);
			processMargeCell(processRowDTOS)
			scope.column.expend = scope.row.expend

			setTimeout(() => {
				tableOptions.value.tableData.splice(scope.rowIndex, 1, ...processRowDTOS)
			}, 0)

		} else {
			const process = findProcess(scope.row);
			scope.row.rowspan = 1;
			scope.row.operateTime = scope.row.operateTime.substring(3, scope.row.operateTime.length);
			scope.row.color = '';
			tableOptions.value.tableData.splice(scope.rowIndex, process.length, scope.row)
		}
		if (tableOptions.value.tableData.every(item => !item.expend)) {
			scope.column.expend = false
		}
	}

	const renderTableOptions = (materialList) => {
		const list = materialList //JSON.parse(JSON.stringify(materialList));
		if (!list || !list.length) return {
			tableColumns: [],
			tableData: []
		};
		const paramsColumn = list[0].paramColumns

		const filterL = list.filter(item => !['中控', '终检'].includes(item['processName']) && ![4].includes(item.status))

		//存储过滤后的全部行数据
		allTableData = filterL;
		const fixList = []
		const t = paramsColumn.filter(item => item.paramName.includes('投料量'))
		if (t) {
			fixList.push(...t)
		}
		const j = paramsColumn.filter(item => item.paramName.includes('进料速度'))
		if (j) {
			fixList.push(...j)
		}
		const otherArr = paramsColumn.filter(i => !fixList.find(p => p.paramName == i.paramName))

		const arr = fixList.concat(otherArr)
		const temp = arr.map(item => {
			let defaultObj = {
				label: item.columnKey,
				width: 60,
				align: 'center',
				children: [{
					label: '目标值',
					prop: 'schemeParamValue',
					parentProp: item.columnKey,
					align: 'center',
					width: 160,
					slot: ({ item, index, columns }) => {
						return renderCell(item, index, columns)
					}
				},
				{
					label: '实测值',
					prop: 'paramValue',
					align: 'center',
					parentProp: item.columnKey,
					width: 160,
					slot: ({ item, index, columns }) => {
						return renderCell(item, index, columns)
					}
				}]
			}

			if (item.paramName == '投料量') {
				return {
					label: item.columnKey,
					width: 60,
					align: 'center',
					children: [
						{
							label: '实测值',
							prop: 'paramValue',
							parentProp: item.columnKey,
							align: 'center',
							width: 160,
							slot: ({ item, index, columns }) => {
								return renderCell(item, index, columns)
							}
						},
						{
							label: '工序累计值',
							prop: 'sum',
							parentProp: item.columnKey,
							align: 'center',
							width: 180,
							slot: ({ item, index, columns }) => {
								return renderCell(item, index, columns)
							}
						},
						{
							label: '总累计值',
							prop: 'total',
							align: 'center',
							parentProp: item.columnKey,
							width: 160,
							slot: ({ item, index, columns }) => {
								return renderCell(item, index, columns)
							}
						},]
				}
			}
			return defaultObj
		})
		const l = tableColumns.value.concat(temp)

		const expendList = [];
		// 每个工序过滤出第一行 用来增加展开/折叠功能 
		filterL.map(item => {
			const process = expendList.find(row => item.processName == row.processName && row.sn == item.sn);
			if (!process) {
				expendList.push(item)
			}
		})
		expendTableData = JSON.parse(JSON.stringify(expendList));
		return {
			tableColumns: l,
			tableData: expendList
		}
	}



	/**
	 * 实验记录查看
	 */
	const getStepTable = async (record) => {
		if (!record) return;
		try {
			const { data } = await request({
				url: `/pm/experimentRecord/stepTable/${record}`,
				method: 'GET',
			});
			tableOptions.value = renderTableOptions(data)

			margeCell(tableOptions.value.tableData)
			// tableStepList.value = data;
		} catch (error) {
			console.log(error);
			// options.onError(error as any);
		}
	};

	watch(
		() => props.recordId,
		(val) => {
			getStepTable(props.recordId);
		},
		{
			deep: true,
			immediate: true,
		}
	)



	// onMounted(() => {
	//     getStepTable(props.recordId);
	// })


	// const tableOptions = computed(() => {
	//     const list = JSON.parse(JSON.stringify(props.materialList));
	//     if (!list || !list.length) return {
	//         tableColumns: [],
	//         tableData: []
	//     };
	//     const keys = Object.keys(list[0])

	//     const tlKey = keys.find(item => item.includes('投料量'))
	//     const qcList = [];
	//     let eqIndex = 0;

	//     list.forEach((row, _rowIndex) => {
	//         const prevRow = list[_rowIndex - 1];
	//         let nextRow = list[_rowIndex + 1];
	//         if (prevRow && prevRow['工序'] === row['工序']) {
	//             row.row = 0;
	//             row.rowspan = 0;
	//         } else {
	//             let countRowspan = 1;
	//             while (nextRow && nextRow['工序'] === row['工序']) {
	//                 nextRow = list[++countRowspan + _rowIndex];
	//             }

	//             if (countRowspan > 1) {
	//                 row.row = _rowIndex;
	//                 row.rowspan = countRowspan;
	//                 row['操作时间'] = '开始：' + row['操作时间'];
	//                 row.color = '#d4b106';
	//                 list[countRowspan + _rowIndex - 1]['操作时间'] = '结束：' + list[countRowspan + _rowIndex - 1]['操作时间'];
	//                 list[countRowspan + _rowIndex - 1].color = '#ff6200';
	//                 row['序号'] = eqIndex + 1
	//                 eqIndex++
	//             } else {
	//                 row['序号'] = eqIndex + 1
	//                 if (nextRow) eqIndex++;

	//             }

	//         }
	//     })

	//     // list.forEach(item => {
	//     //     const arr = list.filter(p => p['工序'] == item['工序'] && item['操作时间'] > p['操作时间'] && item[tlKey]['物料名称'] == p[tlKey]['物料名称'])
	//     //     const l = arr.map(v => {
	//     //         if (v[tlKey]['实测值']) {
	//     //             return round(v[tlKey]['实测值'], 0)
	//     //         }
	//     //         return ''
	//     //     })
	//     //     item[tlKey]['累计值'] = sum(l) || 0

	//     // })

	//     const filterList = keys.filter((k) => !tableColumns.value.some(item => item.prop == k))
	//     const temp = filterList.map(item => {
	//         const value = Object.keys(list[0][item])
	//         if (value.length == 4) {
	//             return {
	//                 label: item,
	//                 width: 60,
	//                 align: 'center',
	//                 children: [
	//                     {
	//                         label: '物料名称',
	//                         parentProp: item,
	//                         prop: '物料名称',
	//                         align: 'center',
	//                         width: 140,
	//                         slot: ({ item, index, columns }) => {
	//                             if (!item[columns.parentProp]) return ''
	//                             return item[columns.parentProp][columns.prop] || '';
	//                         }
	//                     },
	//                     {
	//                         label: '目标值',
	//                         parentProp: item,
	//                         prop: '目标值',
	//                         align: 'center',
	//                         width: 80,
	//                         slot: ({ item, index, columns }) => {
	//                             if (!item[columns.parentProp]) return ''
	//                             return item[columns.parentProp][columns.prop] || '';
	//                         }
	//                     },
	//                     {
	//                         label: '实测值',
	//                         parentProp: item,
	//                         prop: '实测值',
	//                         align: 'center',
	//                         width: 80,
	//                         slot: ({ item, index, columns }) => {
	//                             if (!item[columns.parentProp]) return ''
	//                             return item[columns.parentProp][columns.prop] || '';
	//                         }
	//                     },
	//                     {
	//                         label: '累计值',
	//                         parentProp: item,
	//                         prop: '累计值',
	//                         align: 'center',
	//                         width: 80,
	//                         slot: ({ item, index, columns }) => {
	//                             if (!item[columns.parentProp]) return ''
	//                             return item[columns.parentProp][columns.prop] || '';
	//                         }
	//                     }]
	//             }
	//         } else if (value.length == 3) {
	//             return {
	//                 label: item,
	//                 width: 60,
	//                 align: 'center',
	//                 children: [
	//                     {
	//                         label: '物料名称',
	//                         parentProp: item,
	//                         prop: '物料名称',
	//                         align: 'center',
	//                         width: 140,
	//                         slot: ({ item, index, columns }) => {
	//                             if (!item[columns.parentProp]) return ''
	//                             return item[columns.parentProp][columns.prop] || '';
	//                         }
	//                     },
	//                     {
	//                         label: '目标值',
	//                         parentProp: item,
	//                         prop: '目标值',
	//                         align: 'center',
	//                         width: 80,
	//                         slot: ({ item, index, columns }) => {
	//                             if (!item[columns.parentProp]) return ''
	//                             return item[columns.parentProp][columns.prop] || '';
	//                         }
	//                     },
	//                     {
	//                         label: '实测值',
	//                         parentProp: item,
	//                         prop: '实测值',
	//                         align: 'center',
	//                         width: 80,
	//                         slot: ({ item, index, columns }) => {
	//                             if (!item[columns.parentProp]) return ''
	//                             return item[columns.parentProp][columns.prop] || '';
	//                         }
	//                     },
	//                 ]
	//             }
	//         }
	//         return {
	//             label: item,
	//             width: 60,
	//             align: 'center',
	//             children: [{
	//                 label: '目标值',
	//                 parentProp: item,
	//                 prop: '目标值',
	//                 align: 'center',
	//                 width: 80,
	//                 slot: ({ item, index, columns }) => {
	//                     if (!item[columns.parentProp]) return ''
	//                     return item[columns.parentProp][columns.prop] || '';
	//                 }
	//             },
	//             {
	//                 label: '实测值',
	//                 parentProp: item,
	//                 prop: '实测值',
	//                 align: 'center',
	//                 width: 80,
	//                 slot: ({ item, index, columns }) => {
	//                     if (!item[columns.parentProp]) return ''
	//                     return item[columns.parentProp][columns.prop] || '';
	//                 }
	//             }]
	//         }
	//     })
	//     const l = tableColumns.value.concat(temp)


	//     // nextTick(() => {
	//     //     dynamicTableRef.value.render()
	//     // })
	//     return {
	//         tableColumns: l,
	//         tableData: list
	//     }

	// });


	// const tableOptions = computed(() => {
	//     const list = JSON.parse(JSON.stringify(props.materialList));
	//     if (!list) return [];
	//     return list.map((item) => {
	//         if (item.putIntoFlag && item.dosageList && item.dosageList.length) {
	//             item.list = item.dosageList.map(element => {
	//                 element.paramList = item.paramList
	//                 return element
	//             });
	//         }
	//         item = rowToCol(list, item);
	//         return item
	//     });
	// });


	// const rowToCol = (list, ele) => {
	//     let columns = []
	//     let data = []
	//     let flag;
	//     if (ele.putIntoFlag && ele.dosageList && ele.dosageList.length) {
	//         columns = [{
	//             label: '工序',
	//             prop: 'processName'
	//         },
	//         {
	//             label: '时间',
	//             prop: 'operateTime',
	//             width: 480
	//         }]
	//         // 有物料信息
	//         ele.dosageList.filter(item => item.status != 4).map(dosage => {
	//             const paramList = []
	//             ele.paramList && ele.paramList.filter(item => item.dosageId == dosage.id).map(item => {
	//                 const name = paramList.findIndex(p => p.fieldName == item.paramName)
	//                 if (name == -1) {
	//                     const columnItem = [{
	//                         fieldName: item.paramName,
	//                         paramUnit: item.paramUnit,
	//                         id: dosage.id,
	//                         label: `${item.paramName}(${item.paramUnit})`,
	//                         prop: 'paramValue',
	//                         width: 300,
	//                         status: item.status,
	//                         slot: ({ item, index, columns }) => {
	//                             const rowCell = item.list && item.list.find(r => r.dosageId == columns.id && r.paramName == columns.fieldName)
	//                             return rowCell ? rowCell.paramValue : ''
	//                         }
	//                     }]
	//                     paramList.push(...columnItem)
	//                 }

	//             })

	//             paramList.unshift(
	//                 {
	//                     fieldName: '用量',
	//                     paramUnit: dosage.unit,
	//                     id: dosage.id,
	//                     label: `用量(${dosage.unit})`,
	//                     prop: 'dosage',
	//                     width: 220,
	//                     status: dosage.status,
	//                     slot: ({ item, index, columns }) => {
	//                         let rowspan = item.list && item.list.find(r => r.dosageId == columns.id)
	//                         return rowspan ? rowspan.dosage : ''
	//                     }

	//                 }
	//             )

	//             columns.push({
	//                 label: dosage.invName,
	//                 children: paramList
	//             })
	//         })

	//         let copyList = ele.paramList.map(item => {
	//             const t = ele.dosageList.find(p => p.id == item.dosageId)
	//             item.dosage = t ? t.dosage : ''
	//             // item.dosageList = ele.dosageList
	//             return item
	//         })
	//         // 获取参数最大行数
	//         const lenList = copyList.map(i => {
	//             const l = ele.paramList.filter(v => {
	//                 return v.paramName == i.paramName && v.dosageId == i.dosageId
	//             })
	//             return l
	//         }).sort((a, b) => b.length - a.length)
	//         const list = [];
	//         // 每行创建去重的参数
	//         for (let index = 0; index < lenList[0].length; index++) {
	//             list[index] = []
	//             let t = copyList.map((item) => {
	//                 const name = list[index].findIndex(p => (p.paramName == item.paramName && item.dosageId == p.dosageId))
	//                 if (name == -1) {
	//                     Array.isArray(item) ? '' : list[index].push(item)
	//                     return []
	//                 } else {
	//                     return item
	//                 }
	//             })
	//             copyList = t
	//         }
	//         list.map((item, i) => {
	//             data.push({
	//                 processName: ele.processName,
	//                 operateTime: formatByDayjs(item[0].operateTime, 'MM-DD HH:mm:ss'),
	//                 list: item
	//             })
	//         })
	//         flag = 'dosage';

	//     } else if (ele.paramList && ele.paramList.length && ele.processName != '中控') {
	//         columns = [{
	//             label: '工序',
	//             prop: 'processName'
	//         },
	//         {
	//             label: '时间',
	//             prop: 'operateTime'
	//         }]
	//         // 只有参数
	//         let copyList = JSON.parse(JSON.stringify(ele.paramList))
	//         ele.paramList && ele.paramList.filter(i => i.status != 4).map(item => {
	//             const name = columns.findIndex(p => p.fieldName == item.paramName)
	//             if (name == -1) {
	//                 const columnItem = {
	//                     fieldName: item.paramName,
	//                     paramUnit: item.paramUnit,
	//                     label: `${item.paramName}(${item.paramUnit})`,
	//                     prop: 'paramValue',
	//                     status: item.status,
	//                     slot: ({ item, index, columns }) => {
	//                         const rowspan = item.list && item.list.find(r => r.paramName == columns.fieldName)
	//                         return rowspan ? rowspan.paramValue : ''
	//                     }
	//                 }
	//                 columns.push(columnItem)
	//             }
	//         })
	//         // 获取参数最大行数
	//         const lenList = columns.map(i => {
	//             const l = ele.paramList.filter(v => v.paramName == i.fieldName)
	//             return l
	//         }).sort((a, b) => b.length - a.length)
	//         const list = [];
	//         // 每行创建去重的参数
	//         for (let index = 0; index < lenList[0].length; index++) {
	//             list[index] = []
	//             let t = copyList.map((item) => {
	//                 const name = list[index].findIndex(p => p.paramName == item.paramName)
	//                 if (name == -1) {
	//                     Array.isArray(item) ? '' : list[index].push(item)
	//                     return []
	//                 } else {
	//                     return item
	//                 }
	//             })
	//             copyList = t
	//         }
	//         list.map((item, i) => {
	//             data.push({
	//                 processName: ele.processName,
	//                 operateTime: formatByDayjs(item[0].operateTime, 'MM-DD HH:mm:ss'),
	//                 list: item
	//             })
	//         })
	//         flag = 'param';
	//     } else if (ele.processName == '中控') {
	//         columns = [{
	//             label: '工序',
	//             prop: 'processName'
	//         }, {
	//             label: '分析手段',
	//             prop: 'analysisName'
	//         }, {
	//             label: '检验指标手段',
	//             prop: 'paramName'
	//         }, {
	//             label: '取样实际描述',
	//             prop: 'sampleDesc'
	//         }, {
	//             label: '取样时机',
	//             prop: 'sampleTime'
	//         }]
	//         flag = 'zk';

	//         data = ele.paramList.filter(i => i.status != 4).map(item => {
	//             item.processName = ele.processName
	//             return item
	//         })
	//     } else {
	//         columns = [{
	//             label: '工序',
	//             prop: 'processName'
	//         }]
	//         // 只有工序
	//         data = [{
	//             processName: ele.processName,
	//         }]
	//     }


	//     if (['dosage', 'param'].includes(flag)) {
	//         data.unshift({
	//             processName: ele.processName,
	//             paramValue: '-',
	//             title: '开始',
	//             operateTime: '开始：' + ele.startTime,
	//         })
	//         data.push({
	//             processName: ele.processName,
	//             paramValue: '-',
	//             title: '结束',
	//             operateTime: '结束：' + ele.endTime,
	//         })
	//     }
	//     return {
	//         tableColumns: columns,
	//         data,
	//         flag
	//     }
	// }
</script>
<style scoped lang="scss">
	.table-container {
		max-height: 700px;
		overflow: auto;

		.process-cell {
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
		}

	}
</style>